<template>
    <div class="login-wrap">
      <img class="background-img" src="../assets/login/background.png" alt="" >
      <div class="login-modal">
        <div class="computer">
          <img src="../assets/login/computer.png" alt="">
        </div>
        <div class="login-form">
          <div class="login-item">
            <span class="icon">
              <img src="../assets/login/account.png" alt="">
            </span>
            <input maxlength="15" v-model="ruleForm.username" placeholder="请输入用户名" name="username"  type="text" autocomplete="off">
          </div>
          <div class="login-item">
            <span class="icon">
              <img src="../assets/login/password.png" alt="">
            </span>
            <input maxlength="15" v-model="ruleForm.password" placeholder="请输入密码" type="password" name="password" autocomplete="off"  @keyup.enter="submitForm()">
          </div>
          <div class="login-btn" @click="submitForm()">登录</div>
        </div>
      </div>
    </div>
</template>
<script>
import Axios from "axios";
export default {
  // admin admin
  name: "login",
  data: function() {
    return {
      ruleForm: {
        username: "",
        password: ""
      }
    };
  },
  methods: {
    submitForm() {
      let result = this.$requiredFun(
        [
          ["username", "string", "请输入帐号"],
          ["password", "string", "请输入密码"]
        ],
        this.ruleForm
      );
      if (result.state) {
        let formData = new FormData();
        formData.append("user_name", this.ruleForm.username);
        formData.append("password", this.ruleForm.password);
        this.$http(
          "/wgl_admin/index.php?app=admin&act=login",
          "post",
          { "Content-Type": "application/json;charset=utf-8" },
          {},
          formData,
          success => {
            Axios.defaults.headers.common["Authorization"] =
              sessionStorage.loginMsg;
            this.$message.success("登录成功");
            sessionStorage.removeItem("loginMsg");
            //保存token到session当中
            if (!sessionStorage.loginMsg) {
              sessionStorage.setItem("loginMsg", success.data.admin_token);
              // sessionStorage.setItem("groupId", success.data.group_id);
            }
            let self = this;
            if (success.data.group_id === 0) {
              setTimeout(() => {
                self.$router.push({ name: "overview" });
              }, 1000);
            } else {
              setTimeout(() => {
                self.$router.push({ name: "category", params : {type: 1 } });
              }, 1000);
            }
          },
          err => {
            this.$message.error(err.state.msg);
          }
        );
      } else {
        this.$message.error(result.msg);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@mixin mid {
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.login-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  .login-modal {
    @include mid();
    width: 1270px;
    height: 463px;
    .computer {
      float: left;
    }
    .login-form {
      float: right;
      width: 596px;
      height: 464px;
      border-radius: 14px;
      padding: 142px 135px 106px;
      background: #fff;
      box-shadow: 0px 16px 42px 0px #59a3fc;
      .login-item {
        display: block;
        height: 34px;
        margin-bottom: 52px;
        .icon {
          float: left;
          margin-right: 24px;
          > img {
            display: block;
          }
        }
        > input {
          float: left;
          width: 256px;
          color: #cdcdcd;
          height: 34px;
          border: none;
          border-bottom: 1px solid #cdcdcd;
          font-size: 14px;
          padding-bottom: 16px;
          text-align: left;
          background: none;
          -webkit-appearance: none;
          background-color: #fff;
          background-image: none;
          outline: none;
          transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
        }
      }
      .login-btn {
        display: block;
        background: #66b1ff;
        background: -webkit-linear-gradient(left, #5fa9fe, #448cf6);
        background: -moz-linear-gradient(left, #5fa9fe, #448cf6);
        background: -ms-linear-gradient(left, #5fa9fe, #448cf6);
        color: #fff;
        text-align: center;
        height: 44px;
        line-height: 44px;
        border-radius: 20px;
        width: 326px;
        cursor: pointer;
        font-size: 17px;
      }
      .login-btn:active {
        background: -webkit-linear-gradient(left, #5fa9fe, #448cf6);
        background: -moz-linear-gradient(left, #5fa9fe, #448cf6);
        background: -ms-linear-gradient(left, #5fa9fe, #448cf6);
      }
      .login-btn:hover {
        background: #66b1ff;
        border-color: #66b1ff;
        color: #fff;
      }
    }
  }
}
.ms-title {
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: -230px;
  text-align: center;
  font-size: 30px;
  color: #fff;
}
.ms-login {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 380px;
  height: 240px;
  margin: -150px 0 0 -190px;
  padding: 40px;
  border-radius: 5px;
  background: #fff;
}
.login-btn {
  text-align: center;
}
.login-btn button {
  width: 100%;
  height: 36px;
}
.background-img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
</style>
